<template>
  <div id="filterEffect"></div>
</template>

<script>
import * as PIXI from 'pixi.js'
import { OutlineFilter, GlowFilter } from 'pixi-filters'
export default {
  name: 'filterEffect',
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initPixi()
    })
  },
  methods: {
    initPixi() {
      const options = {
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0x1099bb,
        resolution: window.devicePixelRatio || 1,
        antialias: true
      }
      // 创建应用
      const app = new PIXI.Application(options)
      // 将应用画布添加到DOM中
      document.querySelector('#filterEffect').appendChild(app.view)

      const arrow = PIXI.Texture.from('/textures/arrow.png')
      const sprite = new PIXI.Sprite(arrow)
      sprite.x = app.screen.width / 2
      sprite.y = app.screen.height / 2
      // 设置精灵锚点
      sprite.anchor.set(0.5)
      // 添加到画布
      app.stage.addChild(sprite)

      // 创建模糊滤镜
      const blurFilter = new PIXI.BlurFilter()
      // 设置模糊程度
      blurFilter.blur = 0
      // 模糊应用到精灵
      // sprite.filters = [blurFilter]
      // // 监听鼠标是否进入
      // sprite.interactive = true
      // sprite.on('pointerover', () => {
      //   blurFilter.blur = 10
      // })
      // sprite.on('pointerout', () => {
      //   blurFilter.blur = 0
      // })

      // 轮廓滤镜
      const outlineFilter = new OutlineFilter(3, 0xffff00)
      // 辉光滤镜
      const glowFilter = new GlowFilter({
        distance: 120,
        outerStrength: 3,
        innerStrength: 0,
        color: 0xff0000,
        quality: 0.5
      })
      sprite.filters = [outlineFilter, glowFilter]
    }
  }
}
</script>
<style>
#tag {
  width: 100%;
  height: 100%;
}
</style>
